import React, { forwardRef } from 'react';
import './index.scss';

export interface IconItem {
  id: string;
  src: string;
  alt?: string;
  onClick?: () => void;
}

export interface IconListProps {
  icons?: IconItem[];
  width?: number;
  height?: number;
  backgroundColor?: string;
  borderRadius?: number;
  iconSize?: number;
  iconGap?: number;
  padding?: number;
  onClick?: () => void;
  style?: React.CSSProperties;
  className?: string;

  // 低代码平台属性
  __render?: any;
  __scope?: any;
  $$ComponentMetaData?: any;
  componentConfig?: any;
  title?: any;
  $$componentIndex?: number;
  __id?: string;
  fieldId?: string;
  __events?: any;

  [key: string]: any;
}

const IconList = forwardRef<HTMLDivElement, IconListProps>(function ({
                                                                               width = 64,
                                                                               height = 1048,
                                                                               backgroundColor = 'rgba(0,0,0,0.5)',
                                                                               borderRadius = 8,
                                                                               iconSize = 30,
                                                                               iconGap = 12,
                                                                               padding = 12,
                                                                               onClick,
                                                                               style = {},
                                                                               className = '',
                                                                               __render,
                                                                               __scope,
                                                                               $$ComponentMetaData,
                                                                               componentConfig,
                                                                               title,
                                                                               $$componentIndex,
                                                                               __id,
                                                                               fieldId,
                                                                               __events,
                                                                               ...restProps
                                                                             }, ref) {
  const containerStyle: React.CSSProperties = {
    '--container-width': `${width}px`,
    '--container-height': `${height}px`,
    '--background-color': backgroundColor,
    '--border-radius': `${borderRadius}px`,
    '--icon-size': `${iconSize}px`,
    '--icon-gap': `${iconGap}px`,
    '--padding': `${padding}px`,
    ...style
  } as React.CSSProperties;

  const iconListClassName = [
    'hzdz-icon-list',
    className
  ].filter(Boolean).join(' ');

  const handleIconClick = (icon: IconItem, event: React.MouseEvent) => {
    event.stopPropagation();
    icon.onClick?.();
  };

  const handleContainerClick = () => {
    onClick?.();
  };

  const icons= [
    {
      id: '1',
      src: 'http://localhost:8085/static/images/shouye/首页.png',
      alt: '图标1'
    },
    {
      id: '2',
      src: 'http://localhost:8085/static/images/shouye/地图.png',
      alt: '图标2'
    },
    {
      id: '3',
      src: 'http://localhost:8085/static/images/shouye/天气.png',
      alt: '图标3'
    },
    {
      id: '4',
      src: 'http://localhost:8085/static/images/shouye/时钟.png',
      alt: '图标4'
    },
    {
      id: '5',
      src: 'http://localhost:8085/static/images/shouye/定位.png',
      alt: '图标5'
    },
    {
      id: '5',
      src: 'http://localhost:8085/static/images/shouye/发送.png',
      alt: '图标5'
    },
    {
      id: '6',
      src: 'http://localhost:8085/static/images/shouye/气泡.png',
      alt: '图标6'
    },
    {
      id: '7',
      src: 'http://localhost:8085/static/images/shouye/菜单.png',
      alt: '图标7'
    },
    {
      id: '7',
      src: 'http://localhost:8085/static/images/shouye/方格.png',
      alt: '图标7'
    },
    {
      id: '8',
      src: 'http://localhost:8085/static/images/shouye/监控.png',
      alt: '图标8'
    },
    {
      id: '9',
      src: 'http://localhost:8085/static/images/shouye/转换.png',
      alt: '图标9'
    },
    {
      id: '10',
      src: 'http://localhost:8085/static/images/shouye/公路.png',
      alt: '图标10'
    },
    {
      id: '11',
      src: 'http://localhost:8085/static/images/shouye/马路.png',
      alt: '图标11'
    },
    {
      id: '12',
      src: 'http://localhost:8085/static/images/shouye/菜单.png',
      alt: '图标12'
    },
    {
      id: '13',
      src: 'http://localhost:8085/static/images/shouye/楼房.png',
      alt: '图标13'
    },
    {
      id: '14',
      src: 'http://localhost:8085/static/images/shouye/监控.png',
      alt: '图标14'
    },
    {
      id: '15',
      src: 'http://localhost:8085/static/images/shouye/下降.png',
      alt: '图标15'
    }
  ]

  return (
    <div
      ref={ref}
      className={iconListClassName}
      style={containerStyle}
      onClick={handleContainerClick}
      {...restProps}
    >
      <div className="hzdz-icon-list__container">
        {icons.map((icon, index) => (
          <div
            key={icon.id || `icon-${index}`}
            className="hzdz-icon-list__icon-wrapper"
          >
            <img
              className="hzdz-icon-list__icon"
              src={icon.src}
              alt={icon.alt || `图标${index + 1}`}
              onClick={(event) => handleIconClick(icon, event)}
            />
          </div>
        ))}
      </div>
    </div>
  );
});

export default IconList;
